
<div class="post" id="garage" style="margin-bottom: 2px;" >
    <div class="postheader">

        <table style="height: 34px;">
            <tr>
                <td style="padding-top: 5px;">
                    <h1 style="margin-top: 0px; padding-top: 3px; ">Garage</h1>                        
                </td>
                <td style="padding-top: 6px;">
                    
                </td>
                <td style="padding-top: 6px;">
                    
                </td>
            </tr>
        </table>
    </div>
        
    <div class="postcontent" style="padding: 0px; padding-left: 20px; margin-top: 12px;">
        
        <div style="margin-bottom: 16px;">
            <a id="btnRoster" title="Switch to Roster">Roster</a>
            <button id="btnToggleGarageViewTable" title="Change View to Table"></button>
            <button id="btnToggleGarageViewGrid" title="Change View to Grid"></button>

            <button id="btnManageGarage" title="Manage Garage"></button>
            <ul id="mnuManageGarage" style= "position: absolute; margin-top: 0px; margin-left: 20px; z-index: 200; border: solid #666 1px; display: none; box-shadow:none; width: 80px; background: #000; ">
                <li><a id="btnUseThisMech" href="#">Use in drop</a></li>
                <li><a id="btnRenameMech" href="#">Rename</a></li>
                <li><a id="btnDeleteMech" href="#">Delete</a></li>   
            </ul>
            
            <button id="btnGarageView" title="Change View">View</button>
            <ul id="mnuGarageView" style= "position: absolute; margin-top: 0px; margin-left: 20px; z-index: 200; border: solid #666 1px; display: none; box-shadow:none; width: 40px; background: #000; ">
               
                <li><a id="btnGarageViewTable">Table</a></li>
                <li><a id="btnGarageViewGrid" >Grid</a></li>
            </ul>
            <button id="btnGarageSort" title="Sort the Garage">Sort</button>
            <ul id="mnuGarageSort" style=" position: absolute; z-index: 200; margin-top:2px; width:100px; border: none; display: none; box-shadow:none; border: solid #666 1px; background: black; ">
                <li><a id="btnGarageSortWeight" href="#">Sort by weight</a></li>
                <li><a id="btnGarageSortName" href="#">Sort by name</a></li>
                <li><a id="btnGarageSortMech" href="#">Sort by 'mech</a></li>
                <li><a id="btnGarageSortSpeed" href="#">Sort by speed</a></li>
                <li><a id="btnGarageSortDate" href="#">Sort by date</a></li>
            </ul>
            <!-- a id="btnCopyFromSmurfy" title="Copy a 'Mech from Smurfy" href="#">Smurfy</a -->
           
            
            
    
        </div>
        
        {% if not garage %}
        <p style="margin-left: 20px; color: #ccc; font-weight: normal;";>Your garage is empty.</p>
        <p style="margin-left: 20px; color: #ccc; font-weight: normal;"; >Add mechs by configuring and saving them on the <span style="font-weight: bold;"; >Roster</span> screen.</p>
        {% endif %}
        
        {% if garage %}
        <table id="tblGarage" style="border-collapse: collapse; display: none; color: #ccc;">
            <tr style="padding: 4px;" class="">
                <th style="height: 38px; width: 20px" class="uisortgarage" id="uisortweightg">T</th>
                <th style="height: 38px; width: 100px" class="uisortgarage" id="uisortnameg" >Name</th>
                <th style="height: 38px; width: 80px" class="uisortgarage" id="uisortmechg">'Mech</th>
                <th style="height: 38px; width: 55px" class="uisortgarage" id="uisortspeedg">Speed</th>
                <th style="height: 38px; width: 140px; font-weight: bold;">Weapons</th>
                <th style="height: 38px; width: 130px; font-weight: bold;">Equipment</th>
                <th style="height: 38px; width: 130px; font-weight: bold;">Modules</th>
            </tr>
                
            {% for m in garage %}
            <tr title="Select a 'Mech to activate the Manage Garage Menu - or doubleclick one to use it in the drop." class="row-garage-table" id="x{{m.name|toID}}" >
                <td class="cell-roster-table">
                    <span style="" class="cell-roster-table-tooltip uimechweightg ">
                        {{ m.weight }}
                    </span>
                </td>
                 <td class="cell-roster-table">
                    <span style="" class="cell-roster-table-tooltip uimechname ">
                        {{ m.name|escape }}
                    </span>
                </td>
       
                    
                <td class="cell-roster-table" >
                    <span style="" class="cell-roster-table-tooltip">
                        {% if m.mechtype %}{{m.mechtype}}{% else %}n/a{% endif %}
                    </span>
                </td>
                <td class="cell-roster-table">
                    <span style="" class="cell-roster-table-tooltip uispeed ">
                        {% if m.speed %}{{m.speed|escapejs}}{% else %}n/a{% endif %}
                    </span>
                </td>
      
                <td class="cell-roster-table">
                    <span style="" class="cell-roster-table-tooltip uiweapons">
                    {% if m.weapons_as_string %}{{m.weapons_as_string|escapejs}}{% else %}n/a{% endif %}
                    </span>               
                </td>
                
                <td class="cell-roster-table">
                    <span style="" class="cell-roster-table-tooltip uiequipment">
                    {% if m.equipment_as_string %}{{m.equipment_as_string|escapejs}}{% else %} n/a{% endif %}
                    </span>
                </td>
    
                
                <td class="cell-roster-table">
                    <span style="" class="cell-roster-table-tooltip uimodules">
                    {% if m.modules_as_string %}{{m.modules_as_string|escapejs}}{% else %}n/a{% endif %}
                    </span>
                </td>
              
            </tr>
            {% endfor %}
        </table>  
        <div class="div-table" id="gridGarage" style="display: none; padding:0px; padding-top:10px; padding-left:50px">
            <div class="div-table-row" >
  
                {% for mech in garage %}
                <div id="g{{mech.name|toID}}" class="cell-garage-grid" title="Select a 'Mech to activate the Manage Garage Menu - or doubleclick one to use it in the drop." style="">
                     <ul style="margin-left: 10px; color: #ccc; margin-right: 10px; position: relative; top: -7px; list-style-position: outside; text-align: center; padding: 0px;">
                         <li style="font-size: 11px; margin-bottom: 10px; color: #525757;font-weight: bold; list-style-type: none;" class="uivariantname">
                             <div class="round"  style="margin-left: 0px; position: absolute; left: -0px; top: -12px; width: 115px; background: #000;  ">
                                 <div class="scroller" style="width: 115px;"id="scrl{{mech.name|toID}}">
                                 <div class="scroller_frame" id="lyr{{mech.name|toID}}">
                                     <div class="scroller_inner" ><span id="rpt{{mech.name|toID}}" class="scroller_content">{{ mech.name|escape }}</span></div>
                                 </div>
                                 </div>
                             </div>
                         </li>
 
                         <li style="list-style-type: none; font-size: 9px; margin-bottom: 6px;" class="uimechname"><br/><br/>{% if mech.mechtype %}{{mech.mechtype}}{% else %}'Mech: n/a{% endif %}</li>
                         <li style="list-style-type: none;font-size: 9px; margin-bottom: 6px;" class="uispeed">{% if mech.speed %}{{mech.speed|escapejs}} kph{% else %}Speed: n/a{% endif %}</li>
                         <li style="list-style-type: none;font-size: 9px; margin-bottom: 6px;" class="uiequipment">{% if mech.equipment_as_string %}{{mech.equipment_as_string|escapejs}}{% else %}Equipment: n/a{% endif %}</li>
                         <li style="list-style-type: none;font-size: 9px; margin-bottom: 6px;" class="uiweapons">{% if mech.weapons_as_string %}{{mech.weapons_as_string|escapejs}}{% else %}Weapons: n/a{% endif %}</li>
                         <li style="list-style-type: none;font-size: 9px; margin-bottom: 6px;" class="uimodules">{% if mech.modules_as_string %}{{mech.modules_as_string|escapejs}}{% else %}Modules: n/a{% endif %}</li>
                     </ul>
                 </div>
                {% endfor %}
            </div>
        </div>
        {% endif %}
    </div>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> 
     <script type="text/javascript">
        planner.garage.mechs = [];
        {% for mech in garage %}
        planner.garage.mechs.push({
            name:      "{{ mech.name|escapejs }}",
            id:        "{{ mech.name|toID }}",
            speed:     "{%if mech.speed = None %}{%else%}{{ mech.speed|escapejs }}{%endif%}",
            mechtype:  "{%if mech.mechtype = None %}{%else%}{{ mech.mechtype }}{%endif%}",
            weapons:   [
            {% if mech.weapons = None %}{% else %}{% for weapon in mech.weapons %}
                "{{ weapon }}",{% endfor %}{% endif %}
            ],
            modules:   [
            {% if mech.modules_as_string %}{% for module in mech.modules_as_list %}
                "{{ module }}",{% endfor %}{% endif %}
            ] ,
            equipment:   [
            {% if mech.equipment_as_string %}{% for e in mech.equipment_as_list %}
                "{{ e }}",{% endfor %}{% endif %}
            ] 
        });
        {% endfor %}
     </script>
</div>
